import styles from './CheckBox.module.scss'
export default function CheckBox({
  checked,
  onChange,
  className,
}: {
  checked: boolean
  onChange: (value: boolean) => void
  className?: string
}) {
  return (
    <div
      onClick={() => onChange(!checked)}
      className={`${styles['checkbox-component']}${
        className ? ' ' + className : ''
      }`}
      style={{
        backgroundColor: checked ? 'var(--ui-text-2)' : '#dedede',
      }}>
      <div
        className={`${styles['checkbox']}${
          checked ? '' : ` ${styles['unchecked']}`
        }`}></div>
    </div>
  )
}
